import React,{Component} from 'react'
import Pages from '../Pages'
import $ from 'jquery'
import Layer from '../Layer'
import { Spin,message} from 'antd';
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
class AddMessge extends Component {
	constructor(args) {
		super()
		this.state = {
			visible: false,
			loadBtning:false,
			requ:true
		}
	}
	showModal = () => {
		this.setState({
			visible: true,
		});
	}
	hideMdoal = (e) => {
		$('.layer').addClass('layer-anim-close');
		setTimeout(() => {
			$('.layer').removeClass('layer-anim-close');
			this.setState({
				visible: false,
			});
		}, 100)
	}
	add(e) {
		e.preventDefault();
		// pub.loadBtning(this,true);
		let question=$("#down").val()
		if(this.refs.message_title.value.replace(/\s+/g,'')!==""&&this.refs.message_note.value.replace(/\s+/g,'')!==""){
			if(this.refs.message_title.value.length>20){
				message.warning('文章标题不能超过20字！')
			}else{
				fetch.addMessage(this.refs.message_title.value,this.refs.message_url.value,this.refs.message_note.value,question).then((data) => {
					if (data.result === 'RC100') {
						this.setState({
							visible: false
						}, () => {
							this.props.show();
						})
					} else {
						message.error(data.errMsg, 3);
					}
					pub.loadBtning(this,false);
				})
			}
			}else{
				message.error("不能输入空格");
				pub.loadBtning(this,false);
			}
			}
			
		
	

	hide(e){
		let val = e.target.value
		if(val==="0"||val===0){
			document.querySelector(".hide").style.display="none"
			this.setState({
				requ:false
			})
		}else{
			document.querySelector(".hide").style.display="block"
		    this.setState({
				requ:true
			})
		}
	}
	// numberInputs = (e)=>{
	// 	let value = e.target.value
	// 	e.target.value = value.replace(/[@#\$%\^&{}?/><\|[\]()（）【】{}《》\+\-\=\''“‘”’\*]+/g,'');
	// }
	render(){
		return(
	    <div>

			<Layer
				title = "新增消息"
				show={this.state.visible}
				hide={(e)=>{this.setState({visible:false})}}
				width="700px"
				height="500px"
			>
				<form className="layui-layer-content" style={{height:'407px'}} onSubmit={(e)=>this.add(e)}>
                   <Spin spinning={this.state.loadBtning}>
					<div className="row">
						<div className="pop-box-1">
							<dl style={{width:'567px'}}>
								<dt><span style={{color:'red'}}>*</span>消息标题：</dt>
								<dd><input required="required" placeholder="请输入消息标题" type="text" ref='message_title' maxLength="40"/></dd>
							</dl>
						<div className="selec" style={{display:"inline-block",marginBottom:"17px",marginRight:"393px"}}>
						<p style={{display:"inline-block",fontWeight:"bold"}}><span style={{color:'red'}}>*</span>消息类型：</p>	
						<select  onChange={(e)=>this.hide(e)} id="down">
							<option value="1">综合考题</option>
							<option value="0">普通消息</option>
						</select>
					</div>
							<dl style={{width:'567px'}} className="hide">
								<dt><span style={{color:'red'}}>*</span>消息网址：</dt>
								<dd><input placeholder="请输入消息URL" type="text" ref='message_url'  required={this.state.requ} /></dd>
							</dl>
							<dl style={{width:'567px'}}>
								<dt><span style={{color:'red'}}>*</span>消息内容：</dt>
								<dd>
									<textarea required="required" placeholder="请输入消息内容" ref='message_note'  maxLength="600"></textarea>
								</dd>
							</dl>
						</div>
						<div className="pop-btn">
							<a className="btn btn-grey layui-layer-close" onClick={(e)=>this.hideMdoal(e)}>取消</a>
							<button type='submit' className="btn add-book" >发布</button>
						</div>
					</div>
                  </Spin>
				</form>
			</Layer>
			
			<a className="btn btn-blue add-new"  onClick={()=>this.showModal()}>新增</a>
		</div>
		)
	}
}
class MessgeManage extends Component {
	constructor(args) {
		super()
		this.state = {
			MessgeList : [],
			activeIndex : 0,
			totalPage:4,
			jumpPage:1
		}
			
	}

	componentWillMount() {
		this.show();
	}
	show() {
		this.setState({
			loading: true
		})
		fetch.messageList({
			pageno: this.state.jumpPage
		}).then((data) => {
			if (data.result === 'RC100') {
				this.setState({
					MessgeList: data.informationList,
					totalPage: data.totalPage
				}, () => {
					this.setState({
						loading: false
					})
				})
			}else{

				message.error(data.errMsg, 3);
				pub.loading(this,false);

			}
		}, (res) => {
			pub.reject();
			this.setState({
				loading: false
			})
		})
	}
	jump(page) {

		this.setState({
			jumpPage: page
		},()=>{
			this.show();
		})

	}

	render() {

		return (
			<div className="container">
				<div className="common-title">任务发布</div>
				<div className="row select-filter clearFix">
					<AddMessge show={this.show.bind(this)}/>
				</div>
				    <div className="row pad-t-20">
				    <Spin spinning={this.state.loading} tip="加载列表中...">
					  <ul className="msg-gl" style={{minHeight:'486px'}} >
					  {this.state.MessgeList.map((item,index)=>{
					  	return(
						      <li key={index}>
						      	<p className="title" style={{width:'100%',wordWrap: 'break-word'}}>{item.informationTitle !== null?item.informationTitle:'未知标题'}</p>
						      	<p className="content" style={{width:'100%',wordWrap: 'break-word'}}>{item.informationNote}</p>
						      	<p>任务地址:{item.inforURL}</p>
						      	<p className="time">{pub.formatTimestamp(item.createTime)}</p>
						      	{item.operationState !== '1'?
						      	<i className="icon-envelope-alt"></i>
						      	:
						      	<i className="icon-envelope" title="删除"></i>
						      }
						      	
						      	{/*<i className="icon-remove" title="删除"></i>*/}
						      </li>
					  		)
					  })}
					  </ul>
					  </Spin>
					  <div className="line"></div>
						<Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} />
					</div>
			</div>

		)
	}

}
export default MessgeManage

